@layout("/common/_container.html"){
<div class="ibox float-e-margins">
    <div class="ibox-content">
        <div class="form-horizontal">

            <div class="row">
                <div class="col-sm-6 b-r">
                            <#input id="id" name="ID" value="${item.id}" disabled="disabled"/>
                            <#input id="name" name="名字" value="${item.name}" underline="true"/>

                            <!--<#input id="sex" name="性别" value="${item.sex}" underline="true"/>-->
                            <#select id="sex" name="性别" underline="true">
                                <option value="1">男</option>
                                <option value="2">女</option>
                            </#select>

                            <!--<#input id="status" name="状态" value="${item.status}" />-->
                            <#select id="status" name="状态" underline="true">
                                <option value="1">开放</option>
                                <option value="2">关闭</option>
                            </#select>

                </div>

                <div class="col-sm-6">
                    <div class="form-group">
                        <input class="chex" id="hobby" value="${item.hobby}" type="hidden"/>
                        <label class="col-sm-3 control-label">爱好</label>
                        <div onchange="fn()">
                            <label><input width="10" type="checkbox" value="唱歌" />&nbsp;唱歌</label>
                            <label><input width="10" type="checkbox" value="跳舞" />&nbsp;跳舞</label>
                            <label><input width="10" type="checkbox" value="说唱" />&nbsp;说唱</label>
                            <label><input width="10" type="checkbox" value="篮球" />&nbsp;篮球</label>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                            <#input id="introduce" name="描述" value="${item.introduce}" underline="true"/>
                </div>
                <div class="col-sm-6">
                    <#image title="头像" id="photo" src="${item.photo}"/>
                </div>
            </div>

            <div class="row btn-group-m-t">
                <div class="col-sm-10">
                    <#button btnCss="info" name="提交" id="ensure" icon="fa-check" clickFun="UserTestInfoDlg.editSubmit()"/>
                    <#button btnCss="danger" name="取消" id="cancel" icon="fa-eraser" clickFun="UserTestInfoDlg.close()"/>
                </div>
            </div>
        </div>

    </div>
</div>
<script src="${ctxPath}/static/modular/usermanager/userTest/userTest_info.js"></script>
<script src="${ctxPath}/static/modular/usermanager/userTest/FileUpload.js"></script>
<script src="${ctxPath}/static/css/elephish/img-upload.css"></script>
<script type="text/javascript">
    $(function () {
        $("#sex option[value=${item.sex}]").attr("selected",true);
        $("#status option[value=${item.status}]").attr("selected",true);
    })

    // 获取选中的ipnut  value值
    let list = []
    let hobby = document.getElementById("hobby").value
    console.log(hobby)
    function fn() {
        list = []
        $('input:checkbox:checked').each(function () {
            console.log($(this).val());
            list.push($(this).val())
        });
        if(list.length!=0){
            $(".chex").val(list)
        }else{
            $(".chex").val('请选择爱好')
        }
    }

    // 根据后端数据回显选中input   XXXX为后端返回数据
    $(hobby.split(",")).each(function (i, e) {
        console.log("e="+e)
        $('input:checkbox[value="' + e + '"]').prop('checked', true);
    })


    // 取消所有input选中状态
    $("input[type='checkbox']").each(function () { this.checked = false; })
</script>
@}
